<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="container"></div>
    <button id="btn-change">change</button>
    <script>
        (function () {

            var snabbdom = window.snabbdom;

            // 定义patch
            var patch = snabbdom.init([
                snabbdom_class,
                snabbdom_props,
                snabbdom_style,
                snabbdom_eventlisteners,
            ])

            // 定义h
            var h = snabbdom.h;
            var container = document.getElementById("container");

            // 生成vnode
            var vnode = h('ul#list', {}, [
                h('li.item', {}, 'Item1'),
                h('li.item', {}, 'Item2'),
                h('li.item', {}, 'Item3'),
            ])

            // 渲染节点
            patch(container,vnode);

            // 改变节点
            document.getElementById("btn-change").addEventListener('click', function () {
                var newVnode = h('ul#list', {}, [
                    h('li.item', {}, "Item1"),
                    h('li.item', {}, "ItemB"),
                    h('li.item', {}, "Item3"),
                ])

                // 对比新旧节点，再次渲染
                patch(vnode, newVnode)
            }, false)
        })();
    </script>
</body>

</html>